import React from 'react';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import './index.scss';
import {getRandomString} from "auxiliaries/extends/random";

export default class ReactSwipe extends React.Component {
    #elementClassName;
    #id = getRandomString();

    constructor(_) {
        super(_);

        this.state = {
            children: React.Children.map(this.props.children, item => {
                const className = `${item.props.className || ''} swiper-slide`;
                const props = {...item.props, className: className};
                return React.cloneElement(item, props);
            })
        };
        this.#elementClassName = "__a" + parseInt(`${Math.random() * 10000}`, 10);
    }

    componentDidMount() {
        let {swipeChildren, swipeOptions, ...rest} = this.props;

        this.setState({
            rest,
            swipeChildren
        });
        this.updateContainer();
        this.swiper.update();
        window.swiperGlobal = this.swiper;
        // if (BROWSERTYPE.iosVersion <= 9) {
        //由于ios9和以下不支持capture，以及不明原因导致外层event优先比内层的翻页先动。造成问题所在

        // $(`#${this.#id}`).children(".swiper-wrapper").on('touchmove', (e) => {
        //     e.stopPropagation();
        //     $(document.body).css('background','#000');
        // }, true);

        // $(".main-index").find(".swipe-container").on('touchmove', (e) => {
        //     e.stopPropagation();
        // }, true)
        // }
    }

    componentWillUpdate(nextProps) {
        if (React.Children.count(this.props.children) !== React.Children.count(nextProps.children)) {
            this.swiper.destroy();
            this.swiper = null;
        }
    }

    componentDidUpdate() {
        this.updateContainer();
        this.swiper.update();
    }

    updateContainer() {
        let {swipeOptions} = this.props;
        let {pagination} = swipeOptions || {};

        if (!this.swiper) {
            this.swiper = new Swiper(`.${this.#elementClassName}`, {
                ...swipeOptions,
                touchMoveStopPropagation: true,
                pagination: pagination ? {
                    el: pagination?.el || '.swiper-pagination'
                } : {}
            });
        }
    }

    componentWillUnmount() {
        this.swiper.destroy();
    }

    // componentWillUpdate(prevProps) {
    //     // this.swiper.destroy();
    //     let {swipeOptions, childCount} = this.props;
    //     let shouldUpdateSwipeInstance = prevProps.childCount !== childCount || !isEqual(prevProps.swipeOptions, swipeOptions);
    //
    //     if (true || shouldUpdateSwipeInstance) {
    //         this.updateContainer();
    //     }
    //     return true;
    // }
    //
    // componentDidUpdate(prevProps) {
    //
    //     this.swiper?.update();
    //     this.swiper?.pagination.render();
    // }

    render() {
        let {swipeOptions, id} = this.props;
        let {pagination} = swipeOptions || {};
        let DataChildren = this.state?.swipeChildren;
        this.#id = id || this.#id;

        return (
            <div id={this.#id}{...this.state.rest} className={[
                this.state?.rest?.className,
                'swiper-container',
                this.#elementClassName
            ].join(' ')}>
                <div className="swiper-wrapper">
                    {
                        React.Children.map(this.props.children, item => {
                            const className = `${item.props.className || ''} swiper-slide`;
                            const props = {...item.props, className: className};

                            return React.cloneElement(item, props);
                        })
                    }
                </div>

                {typeof DataChildren === 'function' ? <DataChildren/> : DataChildren}

                {/*如果需要分页器 同下*/}
                {
                    pagination ?
                        <div className="swiper-pagination"/>
                        : null
                }


                {/*如果需要导航按钮 需要判断对应的代码*/}
                {/*<div className="swiper-button-prev"/>*/}
                {/*<div className="swiper-button-next"/>*/}

                {/*如果需要滚动条 同上*/}
                {/*<div className="swiper-scrollbar"/>*/}
            </div>
        );
    }
}